<template>
    <div id="month-income" class="map-container" style="height:300px;" />
</template>
<script>
    import echarts from 'echarts'
    import countApi from '@/api/count'
    export default {
        name: 'MonthIncome',
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            countApi.month_income().then(res => {
                // 对数据进行反转，使其按照月份顺序排列
                const monthData = res.data.month.reverse()
                const dataAxis = []
                const data = []
                monthData.forEach(item => {
                    dataAxis.push(item.month === 1 ? item.year : item.month + '月')
                    data.push(item.num)
                })
                const len = 12 - dataAxis.length
                for (let i = 0; i < len; i++) {
                    dataAxis.push('-') // 在数组开头添加空字符串
                    data.push(0) // 在数据数组开头添加0
                }
                this.initChart(dataAxis, data)
            }).catch(() => {})
            // this.initChart()
        },
        methods: {
            initChart(xAxis, data) {
                this.chart = echarts.init(document.getElementById('month-income'))
                const options = this.getConfigOptions(xAxis, data)
                this.chart.setOption(options)
            },
            getConfigOptions(xAxis, data) {
                const dataAxis = xAxis
                return {
                    title: {
                        text: '月度收入',
                        bottom: 0,
                        left: 'center'
                    },
                    grid: { // 网格配置
                        top: '15%', // 距离容器顶部20%
                        left: '3%', // 距离容器左边3%
                        right: '4%', // 距离容器右边4%
                        bottom: '10%', // 距离容器底部3%
                        containLabel: true // 包含标签
                    },
                    xAxis: {
                        data: dataAxis,
                        axisLabel: { inside: false, color: '#000' },
                        axisTick: { show: false },
                        axisLine: { show: false },
                        z: 10
                    },
                    yAxis: {
                        axisLine: { show: false },
                        axisTick: { show: false },
                        axisLabel: { color: '#000' }
                    },
                    series: [
                        {
                            type: 'bar',
                            showBackground: true, // 显示背景
                            backgroundStyle: { // 背景样式
                                color: 'rgba(255, 255, 255, 0.1)' // 背景颜色
                            },
                            label: { // 标签配置
                                show: true, // 显示标签
                                position: 'top', // 标签位置
                                color: '#000' // 标签颜色
                            },
                            data: data,
                            barWidth: 20 // 柱子宽度
                        }
                    ]
                }
            }
        }
    }

</script>
